<template>
  <div class="detail" ref="detailRef">
    <tab-control
      v-if="showTabControl"
      class="tabs"
      :titles="names"
      @tabItemClick="tabClick"
      ref="tabControlRef"
    />
    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <detail1Swiper :housePics="housePics" />
    <detail2HouseIntroduce
      name="描述"
      :ref="getSectionRef"
      :houseName="mainPart?.topModule?.houseName"
      :houseTags="mainPart?.topModule?.houseTags"
      :houseScore="mainPart?.topModule?.commentBrief"
      :houseLocaltion="mainPart?.topModule?.nearByPosition"
    />
    <detail3HouseCilities
      name="设施"
      :ref="getSectionRef"
      :housecilities="mainPart?.dynamicModule?.facilityModule?.houseFacility"
    />
    <detail4Landlord
      name="房东"
      :ref="getSectionRef"
      :landlord="mainPart?.dynamicModule?.landlordModule"
    />
    <detail5Comment
      name="评论"
      :ref="getSectionRef"
      :comment="mainPart?.dynamicModule?.commentModule"
    />
    <detail6Notice
      name="须知"
      :ref="getSectionRef"
      :order-rules="mainPart?.dynamicModule?.rulesModule?.orderRules"
    />
    <detail7Map
      name="周边"
      :ref="getSectionRef"
      :position="mainPart?.dynamicModule?.positionModule"
    />
    <detail8Intro :price-intro="mainPart?.introductionModule" />

    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="" />
      <div class="text">弘源旅途, 永无止境!</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, toRaw } from "vue"
import { useRouter } from "vue-router"
import { storeToRefs } from "pinia"

import { useScroll } from "@/hooks/useScroll"
import TabControl from "@/components/tab-control/tab-control.vue"
import { useDetailStore } from "@/stores/modules/detail"
import detail1Swiper from "@/views/detail/cpns/detail-1-swiper.vue"
import detail2HouseIntroduce from "./cpns/detail-2-houseIntroduce.vue"
import detail3HouseCilities from "./cpns/detail-3-houseCilities.vue"
import detail4Landlord from "./cpns/detail-4-landlord.vue"
import detail5Comment from "./cpns/detail-5-comment.vue"
import detail6Notice from "./cpns/detail-6-notice.vue"
import detail7Map from "./cpns/detail-7-map.vue"
import detail8Intro from "./cpns/detail-8-intro.vue"
const router = useRouter()
const detailStore = useDetailStore()
detailStore.fetchDetailData()
const { housePics, mainPart } = storeToRefs(detailStore)

// console.log(swiperArayy.value[0]);
// const data = watch(swiperArayy, (newValue) => {
//   return console.log(newValue[0].title)
// })
// console.log(data)
const onClickLeft = () => {
  router.back()
}

// tabControl相关的操作
const detailRef = ref()
const { scrollTop } = useScroll(detailRef)
const showTabControl = computed(() => {
  return scrollTop.value >= 300
})

// const landlordRef = ref()
// const sectionEls = []
// const getSectionRef = (value) => {
//   sectionEls.push(value.$el)
// }
const sectionEls = ref({})
const names = computed(() => {
  return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
  if (!value) return
  const name = value.$el.getAttribute("name")
  sectionEls.value[name] = value.$el
}

// 关于 tab 跳动时闪动的解决方案
let isClick = false
let currentDistance = -1
const tabClick = (index) => {
  const key = Object.keys(sectionEls.value)[index]
  const el = sectionEls.value[key]
  let distance = el.offsetTop
  if (index !== 0) {
    distance = distance - 44
  }

  isClick = true
  currentDistance = distance

  detailRef.value.scrollTo({
    top: distance,
    behavior: "smooth",
  })
}

// 页面滚动, 滚动时匹配对应的tabControll的index
const tabControlRef = ref()
watch(scrollTop, (newValue) => {
  if (newValue === currentDistance) {
    isClick = false
  }
  if (isClick) return

  // 1.获取所有的区域的offsetTops
  const els = Object.values(sectionEls.value)
  const values = els.map((el) => el.offsetTop)

  // 2.根据newValue去匹配想要索引
  let index = values.length - 1
  for (let i = 0; i < values.length; i++) {
    if (values[i] > newValue + 44) {
      index = i - 1
      break
    }
  }
  // console.log(index)
  tabControlRef.value?.setCurrentIndex(index)
})
</script>

<style lang="less" scoped>
.detail {
  height: 100vh;
  overflow-y: auto;
}
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>
